<template>
  <div style="width:500px;height:600px;backgroun-color:#eee;border:5px solid red;">
    <div>
      <div style="padding-left:200px;">
        <a href="#/baby" style="float:left;">
          <img src="../assets/back.png" alt />
        </a>
        <div style="float:left;">日记</div>
        <a style="padding-left:100px" href="#/baby" @click="add_info">保存</a>
      </div>

      <textarea
        style="padding-top:50px;width:495px;height:200px;border:1px solid black;"
        name="info"
        id="info"
        cols="30"
        rows="10"
        placeholder="为这篇记录说点儿什么吧"
      ></textarea>
    </div>

    <div style="height:300px;border:1px solid black;">
      <div style="width:500px;">
        <div style="padding-left:45px;float:left">记录时间</div>
        <div style="float:left;padding-left:250px;">××××/××/××</div>
      </div>
      <div style="float:left;padding-left:45px;padding-top:45px;">
        <input type="file" name="image" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info:''
    }
  },
  methods: {
    add_info(){
      var data=new window.FormData();
      var files=document.querySelector('input[type=file]').files;
      data.append('images',files);
      data.append('info',this.info);


      this.axios({
        url:'',
        data:data,
        method:'post',
        headers: { 
            'Content-Type': 'multipart/form-data'
        }
      })
    }
  }
}
</script>